@import '@/lib/reset.scss';

.indexmv-box {
    @include rect(1220px, 310px);
    // background: #ff0;
    margin: 0 auto;
    .indexmv-ul {
        @include rect(100%, 510px);
        // background: #0f0;

        li {
            @include rect(244px, 230px);
            // background: #0ff;
            float: left;
            @include margin(0 0 25px);
            @include padding(0 10px);
            .indexmv_li {
                @include rect(224px, 126px);
                position: relative;
                overflow: hidden;
                .indexmv_img {
                    @include rect(224px, 126px);
                    background: #e2e2e2;
                    // display: none;
                    transition: all 0.6s;
                }
                //遮罩
                .cover_box {
                    position: absolute;
                    @include margin(0 0);
                    @include rect(224px, 126px);
                    background: rgba(0, 0, 0, 0.3);
                    line-height: 126px;
                    text-align: center;
                    z-index: 10;
                    display: none;
                    cursor: pointer;
                    .icon-videofill {
                        color: #fff;
                        font-size: 55px;
                    }
                }

            }
            &:hover .cover_box {
                display:block
            }
            &:hover .indexmv_img {
                transform: scale(1.1);
            }
            div {
                // @include rect(224px, 50px);
                // background: #00f;
                @include margin(10px 0 0);
                h5 {
                    @include margin( 0 0);
                    @include rect(224px, 21px);
                    // background: #00f;
                    font-weight: 400;
                    line-height: 21px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    cursor: pointer;
                    @include text-color(#000);
                    &:hover {
                        @include text-color(#31c27c);
                    }
                }
                span {
                    display: block;
                    @include rect(224px, 23px);
                    line-height: 23px;
                    @include text-color(#999);
                    cursor: pointer;
                    &:hover {
                        @include text-color(#31c27c);
                    }
                }
            }
            p {
                @include rect(224px, 23px);
                line-height: 23px;
                // background: #f0f;
                @include text-color(#999);
            }
            .icon-recordlight {
                font-size: 20px;
                line-height: 23px;
                float: left;
                @include margin(0 3px 0 0)
            }      
        }
    }
}